<template lang="html">
  <div :class="{'mind-editor':true,'_top30':view}"></div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  mounted() {
    var Editor = require('../../script/editor');
    var el = this.$el;
    var editor = window.editor = new Editor(el);
    this.setEditor(editor);
    if (window.localStorage.mindText) {
      editor.minder.importJson(JSON.parse(window.localStorage.mindText));
    }

    editor.minder.on('contentchange', function () {
      window.localStorage.mindText = JSON.stringify(editor.minder.exportJson());
    });

    window.minder = window.km = editor.minder;
    this.setMinder(editor.minder);
    this.executeCallback();
  },
  computed: {
    ...mapGetters({view: "getView"})
  },
  methods: {
    ...mapActions([
      'executeCallback'
    ]),
    ...mapMutations([
      'setMinder',
      'setEditor'
    ])
  },
}

</script>
<style lang="scss">
  .icon {
      background-image: url("../../assets/minder/icons.png");
      width: 20px;
      height: 20px;
      margin: 2px auto;
      display: block;
    }
</style>
<style lang="scss">@import "../../style/editor.scss";</style>
